<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            border: 1px dotted blue;
            margin: 0 auto;
        }
        #inner{
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
        .box1{
            transform: rotate(10deg);
            -moz-transform: rotate(10deg);
            -webkit-transform: rotate(10deg);
            -ms-transform: rotate(10deg);
        }
        .box2{
            transform: rotate(20deg);
            -moz-transform: rotate(20deg);
            -webkit-transform: rotate(20deg);
            -ms-transform: rotate(20deg);
        }
        .box3{
            transform: rotate(30deg);
            -moz-transform: rotate(30deg);
            -webkit-transform: rotate(30deg);
            -ms-transform: rotate(30deg);
        }
        .box4{
            transform: rotate(40deg);
            -moz-transform: rotate(40deg);
            -webkit-transform: rotate(40deg);
            -ms-transform: rotate(40deg);
        }
        .box5{
            transform: rotate(50deg);
            -moz-transform: rotate(50deg);
            -webkit-transform: rotate(50deg);
            -ms-transform: rotate(50deg);
        }
        .box6{
            transform: rotate(60deg);
            -moz-transform: rotate(60deg);
            -webkit-transform: rotate(60deg);
            -ms-transform: rotate(60deg);
        }
        .box7{
            transform: rotate(70deg);
            -moz-transform: rotate(70deg);
            -webkit-transform: rotate(70deg);
            -ms-transform: rotate(60deg);
        }
        .box8{
            transform: rotate(80deg);
            -moz-transform: rotate(80deg);
            -webkit-transform: rotate(80deg);
            -ms-transform: rotate(80deg);
        }
        .box9{
            transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -webkit-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
        }
        .box10{
            transform: rotate(100deg);
            -moz-transform: rotate(100deg);
            -webkit-transform: rotate(100deg);
            -ms-transform: rotate(100deg);
        }
        .box11{
            transform: rotate(110deg);
            -moz-transform: rotate(110deg);
            -webkit-transform: rotate(110deg);
            -ms-transform: rotate(110deg);
        }
        .box12{
            transform: rotate(120deg);
            -moz-transform: rotate(120deg);
            -webkit-transform: rotate(120deg);
            -ms-transform: rotate(120deg);
        }

    </style>
</head>
<body>
<div id="box">
    <div id="inner"></div>
</div>
<form>
    <input type="radio" name="move" onclick="fn1()"/> rotate(10deg)<br />
    <input type="radio" name="move" onclick="fn2()"/> rotate(20deg)<br />
    <input type="radio" name="move" onclick="fn3()"/> rotate(30deg)<br />
    <input type="radio" name="move" onclick="fn4()"/> rotate(40deg)<br />
    <input type="radio" name="move" onclick="fn5()"/> rotate(50deg)<br />
    <input type="radio" name="move" onclick="fn6()"/> rotate(60deg)<br />
    <input type="radio" name="move" onclick="fn7()"/> rotate(70deg)<br />
    <input type="radio" name="move" onclick="fn8()"/> rotate(80deg)<br />
    <input type="radio" name="move" onclick="fn9()"/> rotate(90deg)<br />
    <input type="radio" name="move" onclick="fn10()"/> rotate(100deg)<br />
    <input type="radio" name="move" onclick="fn11()"/> rotate(110deg)<br />
    <input type="radio" name="move" onclick="fn12()"/> rotate(120deg)<br />
</form>
<script>
    function fn1(){
        var img=document.getElementById("inner");
        img.className="box1";
    }
    function fn2(){
        var img=document.getElementById("inner");
        img.className="box2";
    }
    function fn3(){
        var img=document.getElementById("inner");
        img.className="box3";
    }
    function fn4(){
        var img=document.getElementById("inner");
        img.className="box4";
    }
    function fn5(){
        var img=document.getElementById("inner");
        img.className="box5";
    }
    function fn6(){
        var img=document.getElementById("inner");
        img.className="box6";
    }
    function fn7(){
        var img=document.getElementById("inner");
        img.className="box7";
    }
    function fn8(){
        var img=document.getElementById("inner");
        img.className="box8";
    }
    function fn9(){
        var img=document.getElementById("inner");
        img.className="box9";
    }
    function fn10(){
        var img=document.getElementById("inner");
        img.className="box10";
    }
    function fn11(){
        var img=document.getElementById("inner");
        img.className="box11";
    }
    function fn12(){
        var img=document.getElementById("inner");
        img.className="box12";
    }
</script>
</body>

</html>